import { HeroService } from './../hero.service';
import { Hero } from './../hero';
import { debounceTime, distinctUntilChanged, Observable, Subject, switchMap } from 'rxjs';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero-search',
  templateUrl: './hero-search.component.html',
  styleUrls: ['./hero-search.component.css']
})
export class HeroSearchComponent implements OnInit {

  // $放在变量后面表示是一个Observable对象
  heroes$!:Observable<Hero[]>;
  /**
   * Subject本身是Obsevrable对象，但是用法和promise类似（用next发出消息）
   */
  private searchTerms = new Subject<string>()

  constructor(private heroService: HeroService) { }

  ngOnInit(): void {

    // searchTerms 发送请求，再通过pipe处理一下数据，真正通过switchMap请求
    this.heroes$ = this.searchTerms.pipe(

    // 每次请求要间隔300ms
    debounceTime(300),

    // 只有在值变化才会请求
    distinctUntilChanged(),

    /**
     * 每一次请求都会换(switch)一个新的Observable对象请求
     * 虽然每隔至少300ms再请求，但是仍有一些请求没有得到相应(服务器忙不过来了)，此时就取最近的一次返回结果
     *  */
    switchMap( (term:string) => this.heroService.searchHeroes(term))
    )
  }

  search(term: string): void{
      this.searchTerms.next(term)
  }

}
